<!--
 * @Description: 商品管理
 * @Author: 阳婷
 * @Date: 2021-03-22 10:24:42
 * @LastEditTime: 2022-03-29 14:19:40
 * @LastEditors: 阳婷
-->
<template>
    <div class='box-index'>
        <div class='filter-container'>
            <el-select class="fliterMargin" filterable v-model="categoryId" placeholder="商品类型" size="small" clearable
                @change="getData">
                <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-select class="fliterMargin" filterable v-model="status" placeholder="商品状态" size="small" clearable
                @change="getData">
                <el-option v-for="item in outOfStock" :key="item.key" :label="item.name" :value="item.key">
                </el-option>
            </el-select>
            <el-input class="input-width fliterMargin" size="small" placeholder="商品名称" v-model="keyword" clearable
                @change="getData">
            </el-input>
            <el-button type="primary" class="filterBtn" size="small" @click='getData'>查询</el-button>
        </div>
        <div class="role-content">
            <table-header @click='Eventclick' :hideBtn="hideBtn">
                <el-button type="text" icon="fa fa-plus" @click='addData'> 添加</el-button>
            </table-header>
        </div>
        <el-table border style="width: 100%" :data="tableData" @sort-change='getsort' @row-click='rowclick'
            @selection-change="handleSelectionChange" ref="tables" highlight-current-row :row-key="getRowKeys">
            <el-table-column type="selection" :reserve-selection=true></el-table-column>
            <el-table-column prop="product_code" label="商品编码"></el-table-column>
            <el-table-column prop="product_name" label="商品名称"></el-table-column>
            <el-table-column prop="category_name" label="商品类型"></el-table-column>
            <el-table-column prop="price" label="价格">
                <template #default="scope">
                    {{scope.row.price}} <span v-show="scope.row.unit">/{{scope.row.unit}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status_name" label="商品状态"></el-table-column>
            <!-- <el-table-column prop="remark" show-overflow-tooltip label="备注"></el-table-column> -->
        </el-table>
        <div class="pagination-container">
            <el-pagination background @current-change="handleCurrentChange" :page-size='perPage' :current-page="current"
                :total="pagetotal" layout="total, prev, pager, next, jumper">
            </el-pagination>
            <asides v-model:show="show" v-if="show" v-model:header="header" v-model:Icon='icon' v-model:width="width">
                <detail v-model:row-data="rowData" :categories="categories"></detail>
            </asides>
        </div>
    </div>
</template>
<script>
    import {
        ref,
        reactive,
        toRefs,
        defineComponent,
        onMounted,
        getCurrentInstance
    } from "vue";
    import TableHeader from "./../../components/TableHeader/index.vue"
    import Asides from "@/components/Asides"
    import detail from './detail.vue'
    export default defineComponent({
        setup(props) {
            const datas = reactive({
                categoryId: '',
                hideBtn: {
                    Enable: false,
                    Disable: false,
                    delete: true
                },
                status: "",
                pagetotal: 3, //总条数
                page: 1, //当前页
                perPage: 15, //每页多少条
                current: 1,
                sort: '',
                keyword: '',
                tableData: [],
                chooseGroup: [],
                is_overtime: "",
                rowData: {},
                header: "",
                show: false,
                icon: "el-icon-menu",
                width: "560px",
                outOfStock: [{
                    key: 1,
                    name: "在售"
                }, {
                    key: 2,
                    name: "缺货"
                }, {
                    key: 0,
                    name: "已下架"
                }],
                categories: []
            })
            const { proxy } = getCurrentInstance();
            const tables = ref(null);
            onMounted(() => {
                getData(1)
                setTimeout(() => {
                    getCate()
                }, 200);
            });
            const getData = (val) => {
                datas.show?datas.show=false:""
                if (val == 1) {
                    datas.chooseGroup = []
                    tables.value.clearSelection();
                    datas.page = 1
                }
                proxy.$ajax('get', '/api/products', {
                    keyword: datas.keyword,
                    category_id: datas.categoryId,
                    status: datas.status,
                    page: datas.page,
                    perPage: datas.perPage
                }, (data) => {
                    datas.tableData = data.data.data
                    datas.current = data.data.pageNum
                    datas.perPage = parseFloat(data.data.pageSize)
                    datas.pagetotal = data.data.total
                })
            };
            const getRowKeys = (row) => {
                return row.id
            }
            const getCate = () => {
                proxy.$ajax('get', '/api/categories', {
                    pageSize: 99
                }, (data) => {
                    datas.categories = data.data.data
                })
            }
            const Eventclick = (val) => {
                if (val == "删除") {
                    deletes()
                }
            };
            const rowclick = (val) => {
                datas.show = true
                datas.header = val.product_name
                datas.rowData = val
            };
            const addData = () => {
                datas.show = true
                datas.rowData = {}
                datas.header = "添加"
            };
            const deletes = () => {
                proxy.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        proxy.$ajax(
                            "delete", "/api/products", {
                            id: datas.chooseGroup
                        },
                            data => {
                                proxy.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                tables.value.clearSelection();
                                datas.chooseGroup = []
                                getData()
                            }
                        );
                    })
                    .catch(() => {
                        proxy.$message({
                            type: "info",
                            message: "已取消删除"
                        })
                    })
            };
            const getsort = (val) => {
                if (val && val.order == 'ascending') {
                    datas.sort = val.prop
                } else if (val && val.order == 'descending') {
                    datas.sort = '-' + val.prop
                }
            };
            const handleSelectionChange = (val) => {
                datas.chooseGroup = []
                val.forEach(el => {
                    datas.chooseGroup.push(el.id)
                })
            };
            const handleCurrentChange = (val) => {
                datas.page = val
                getData()
            }

            return { ...toRefs(datas), tables, getData, Eventclick, rowclick, addData, getsort, getRowKeys, handleSelectionChange, handleCurrentChange }
        },
        components: {
            TableHeader,
            Asides,
            detail
        }
    })
</script>